<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 14:40:53
 * @LastEditTime: 2021-12-20 16:48:23
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/api_proxy/index.vue
-->
// axios 跨域
<template>
  <div class='root-container'>
    前端跨域解决
    <br />
    <div @click="apiRequest" class="btn cursor-pointer mt10">点此发送跨域请求</div>
    <ul class="api_main mt10">
      <li>
        1.安装axios
        <p>
          vue add axios
          <em class="cursor-pointer" @click="copyHandle">复制代码</em>
        </p>
      </li>
      <li>
        2.重写webpack部分代码处理跨域
        <p>代码详情查看 vue.config.js</p>
      </li>
      <li>
        3.设置请求拦截器、响应拦截器(二次封装axios)
        <p>代码详情查看 /src/plugins/axios.js</p>
      </li>

      <!-- <li>
        4.使用axios
        <p>
          import axios from "axios"; // 引入二次封装好的axios
          Vue.prototype.$axios = axios; // 将axios全局挂载使用
        </p>
      </li> -->
      <li>4.发送请求
          <p>
               this.$axios.get("/serverApi/userinfo")<br/>
                <span class='ml10'/>.then(resp => {<br/>
                <span class='ml10'/><span class='ml10'/>this.$message.success('请求成功');<br/>
                <span class='ml10'/><span class='ml10'/>console.log("请求成功", resp);<br/>
                <span class='ml10'/>})<br/>
                .catch(err => {<br/>
                <span class='ml10'/>console.log("请求失败", err);<br/>
                <span class='ml10'/>})<br/>
                .finally(() => {<br/>
                <span class='ml10'/>console.log("请求结束");<br/>
                <span class='ml10'/>});<br/>
          </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      params: ""
    };
  },
  created() {},
  mounted() {
      this.$message.warning('打开控制面板后，再进行点击发送请求')
  },
  methods: {
    // 点击复制代码
    copyHandle() {
      let content = "vue add axios";
      let tips = "复制成功";
      var ele = document.createElement("input"); //创建一个input标签
      ele.setAttribute("value", content); // 设置改input的value值
      document.body.appendChild(ele); // 将input添加到body
      ele.select(); // 获取input的文本内容
      document.execCommand("copy"); // 执行copy指令
      document.body.removeChild(ele); // 删除input标签
      if (tips == null) {
        // 显示复制成功之后的提示文本
        // alert("已将内容复制到剪切板");
        this.$message.success(tips);
      } else {
        this.$message.success(tips);
        // alert(tips);
      }
    },
    //   发送请求
    apiRequest() {
      this.$axios
        .get("/serverApi/userinfo")
        .then(resp => {
          this.$message.success('请求成功')
        })
        .catch(err => {
          console.log('请求失败')
        })
        .finally(() => {
          console.log("请求结束");
        });
    }
  }
};
</script>
<style lang='scss' scoped>
.root-container{
    overflow:auto;
}
.btn {
  padding: 5px 10px;
  width: 130px;
  border: 1px solid #8340ff;
  border-radius: 8px;
}
.api_main {
  width: 500px;
  border-radius: 12px;
  min-height: 30px;
  border: 1px solid #b2b6b6;
  padding: 10px 20px;
  max-height: 900px;
  overflow: auto;
  li {
    p {
      padding-left: 20px;
      background: #e6ebf9;
      line-height: 40px;
      position: relative;
      border-radius: 8px;
      margin-top: 10px;
      margin-bottom: 10px;
      em {
        position: absolute;
        right: 5px;
        top: 4px;
        font-size: 12px;
        background: #fff;
        display: inline-block;
        height: 20px;
        width: 60px;
        text-align: center;
        line-height: 20px;
        border-radius: 3px;
      }
    }
  }
}
img{
    // transform: scale(0.5);
    // position: relative;
    // left: -430px;
    width: 893px;
    height: 258px;
  }
</style>